<template>
  <a-modal v-model="visible" :title="`活动合作${disabled ? '详情' : '审核'}`" :maskClosable="false" :width="800" centered
    :footer="null">
    <div class="disFlxJS">
      <div class="disFlx">
        <div class="flex-shrink-0 _mr-20">
          <img class="img" :src="info.coverUrl" alt="" />
        </div>
        <div class="linh-28">
          <div class="disFlx">
            <div class="flex-shrink-0 w-[120px]">活动名称：</div>
            <div>{{ info.title }}</div>
          </div>
          <div class="disFlx">
            <div class="flex-shrink-0 w-[120px]">活动地点：</div>
            <div>{{ info.addressName }}</div>
          </div>
          <div class="disFlx">
            <div class="flex-shrink-0 w-[120px]">活动时间：</div>
            <div>{{ info.startTime + ' ~ ' + info.endTime }}</div>
          </div>
          <!-- <div class="disFlx">
            <div class="flex-shrink-0 w-[120px]">邀请说明：</div>
            <div>{{ info.applyContent }}</div>
          </div> -->
        </div>
      </div>
      <div class="_ml-10" style="align-self: flex-start;">
        <!-- <ImgOrVideo :item="{ url: info.reviewQrCode }" preview :width="100" :height="100" />
                                  <div style="width: 90px;" class="text-center">微信扫码预览活动详情</div> -->
        <a-button type="primary" @click="handleToPreview">
          预览活动详情
        </a-button>
      </div>
    </div>
    <a-alert message="合作详情" type="warning">
      <template #description>
        <div>
          <div>
            报名名额：{{ enrollmentLimitTypeEnumDict }}
          </div>
          <!-- <div>
            报名通知短信：{{enrollmentNotificationMethodEnumDict }}
          </div> -->
          <div>邀请说明：{{ info.applyContent || '无' }}</div>
        </div>
      </template>
    </a-alert>
    <div class="_mt-10 _mb-10 _pt-20 _pb-1" style="background: #F7F8FA;">
      <!-- {{ form.contactId }}
      {{ attache_list.map(item=>({id:item.userId,name:item.userName})) }} -->
      <a-form-model :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }">
        <a-form-model-item label="活动合作联系人:" required>
          <a-select v-model="form.contactId" placeholder="请选择合作联系人" @change="contactChange" :disabled="disabled">
            <a-select-option v-for="item in attache_list" :key="item.userId" :value="item.userId">
              {{ item.userName }}
            </a-select-option>
          </a-select>
          <span class="color9 tips">合作联系人适用于活动发布方联系本组织的活动负责人</span>
        </a-form-model-item>
      </a-form-model>
    </div>

    <a-alert message="合作须知" type="warning">
      <template #description>
        <div>
          <div>1、同意合作后，本组织将可以帮助宣传推广活动，邀请会员报名参加活动（同意后无法退出合作）</div>
          <div>2、通过本组织报名，活动报名信息中的联系方式将会对发起组织加密，无法直接查看/修改联系方式；</div>
          <div>3、如果活动报名需要审核，本组织的报名审核通过后将消耗本组织的短信条数通知参会者；</div>
        </div>
      </template>
    </a-alert>

    <div class="text-center _pt-20" v-if="!disabled">
      <a-button @click="handOk(2)">搁置申请</a-button>
      <a-button type="primary" class="_ml-10" @click="handOk(1)">确定合作</a-button>
    </div>
  </a-modal>
</template>

<script>
import { activityPartnerAp } from '@/api/activity/activity'
import { getUserList } from '@/api/system/system'
import ImgOrVideo from '@/components/ImgOrVideo'
import { EnrollmentLimitTypeEnum, } from '@/enums/activity.js'

export default {
  components: {
    ImgOrVideo
  },
  data() {
    return {
      EnrollmentLimitTypeEnum,
      visible: false,
      info: {},
      attache_list: [],
      disabled: false,
      form: {
        id: undefined,
        result: 1, // 1同意 2拒绝
        remark: '',
        contactId: undefined,
        contactName: undefined,
        contactPhone: undefined
      }
    }
  },
  computed: {
    enrollmentLimitTypeEnumDict() {
      const item = this.Dict.getLocal('EnrollmentLimitTypeEnumDict').find(item => item.dictValue ==
        this.info.registerLimit)
      if (item) {
        return `${item.dictLabel}${this.info.registerLimit == EnrollmentLimitTypeEnum.Limited ? this.info.registerLimitNum + '人' : ''}`
      }
      return ''
    },
    enrollmentNotificationMethodEnumDict() {
      const item = this.Dict.getLocal('EnrollmentNotificationMethodEnumDict').find(item => item.dictValue ==
        this.info.registerSmsType)
      if (item) {
        return item.dictLabel
      }
      return ''
    }
  },
  created() {
    this.geAdminList()
  },
  methods: {
    openModal(item, disabled) {
      this.disabled = disabled

      this.form = { ...item }
      this.info = item
      this.info.addressName = item.activitySiteJson ? JSON.parse(item.activitySiteJson).addressName : ''
      this.visible = true
    },
    // 获取跨会合作联系人
    geAdminList() {
      getUserList().then(res => {
        this.attache_list = res.rows || []
      })
    },
    contactChange(val) {
      let item = this.attache_list.find(f => f.userId === val)
      this.form.contactName = item.userName
      this.form.contactPhone = item.phonenumber
    },
    handOk(type) {
      if (!this.form.contactId && type === 1) {
        return this.$message.error('请选择联系人')
      }
      this.form.result = type
      activityPartnerAp(this.form).then(() => {
        this.$message.success(type === 1 ? '审核通过' : '已成功搁置该申请')
        this.visible = false
        this.$emit('refresh')
      })
    },
    handleToPreview() {
      this.$router.push({
        name: 'activityDetailsPreview',
        query: {
          activityId: this.info.outActivityId,
          partnerReviewRecordId: this.info.id
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.img {
  width: 180px;
  height: 105px;
  object-fit: contain;
}
</style>
